<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
  <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<table id = "employeeTable">
  <tr>
    <th colspan="6">员工列表</th>
  </tr>
  <tr>
    <th>流水号</th>
    <th>员工姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>邮箱</th>
    <th>操作</th>
  </tr>
  <tr th:each="employee,status :${page.list}">
    <td th:text="${status.count}"></td>
    <td th:text="${employee.empName}"></td>
    <td th:text="${employee.age}"></td>
    <td th:text="${employee.sex}"></td>
    <td th:text="${employee.email}"></td>
    <td>
      <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.empId}}">删除</a>
      <a th:href="@{'/employee/'+${employee.empId}}">修改</a>
    </td>
  </tr>
  <tr>
    <td colspan="6"><a th:href="@{/employeeAdd}">增加员工</a></td>
  </tr>
  <tr>
    <td colspan="6">
          <span th:if="${page.hasPreviousPage}">
                  <a th:href="@{/employee/page/1}">首页</a>
                  <a th:href="@{'/employee/page/'+${page.prePage}}">上一页</a>
          </span>
          <span th:each="num : ${page.navigatepageNums}">
                  <a th:if="${page.pageNum==num}" th:href="@{'/employee/page/'+${num}}" th:text="'['+${num}+']'" style="color: red;"></a>
                  <a th:if="${page.pageNum!=num}" th:href="@{'/employee/page/'+${num}}" th:text="${num} "></a>
          </span>
          <span th:if="${page.hasNextPage}">
          <a th:href="@{'/employee/page/'+${page.nextPage}}">下一页</a>
          <a th:href="@{'/employee/page/'+${page.pages}}">末页</a>
          </span>
    </td>
  </tr>
</table>

<form id="deleteForm" method="post">
  <input type="hidden" name="_method" value="delete">
</form>

  <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
  <script type="text/javascript">
    var vue = new Vue({
      el:"#employeeTable",
      methods:{
        deleteEmployee:function (event) {
          //根据id获取表单元素
          var deleteForm = document.getElementById("deleteForm");
          //将触发点击事件的超链接的href属性赋值给表单的action
          deleteForm.action = event.target.href;
          //提交表单
          deleteForm.submit();
          //取消超链接的默认行为
          event.preventDefault();
        }
      }
    });
  </script>
</body>
</html>